<template>
<div class="login_g">
 <!-- 搞一个标题 -->
  <h1 class="login-h1">新冠-上海物资管理系统</h1>
<!--  2.form表单-->
  <el-form
    :model="userLoginForm"
    :rules="loginRules"
    ref="userLoginFormRef"
    label-position="left"
    label-width="0px"
    class="demo-ruleForm login-form"
  >
    <!--    效果图片-->
    <div class="avatar-box">
      <img
        src="../assets/1111.gif"
        style="
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eeeeee;
          "
      />
    <!--   用户信息标题   -->
      <div >
        <h3>系统用户登录</h3>
        <el-form-item prop="username">
          <el-input
            type="text"
            @keyup.enter.native="handleSubmit"
            v-model="userLoginForm.username"
            auto-complete="off"
            placeholder="用户名"
            prefix-icon="iconfont el-icon-user"
          ></el-input>
        </el-form-item>
        <!--        prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
        <el-form-item prop="password">
          <!-- @keyup.enter.native vue 回车触发聚焦事件 @keyup.enter.native -->
          <!-- auto-complete="off"  vue3对应的版本不用了-->
          <el-input
            @keyup.enter.native="handleSubmit"
            type="password"
            v-model="userLoginForm.password"
            auto-complete="off"
            placeholder="密码"
            prefix-icon="el-icon-suitcase-1"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked" class="rememberme"
          >记住密码</el-checkbox
          >
          <div style="float: right">
            <el-button
              type="primary"
              class="el-icon-mobile-phone"
              @click="handleSubmit"
              :loading="loading"
            >&nbsp;登录</el-button
            >
            <el-button type="warning" class="el-icon-delete" @click="restForm"
            >&nbsp;重置</el-button
            >
          </div>
        </el-form-item>
      </div>
    </div>
  </el-form>
</div>
  <Vcode :show="isShow" @success="success" @close="close" />
</template>

<script>
  import Vcode from "vue-puzzle-vcode";
    export default {
      name: "Logins",
      components:{
        Vcode
      },
      data(){
        return {
          //该form 表单时用于存放用户和密码
          userLoginForm:{
            username:'',
            password:''
          },
          checked: true,
          loading: false,
          loginRules: {
            username: [
              {required: true, message: '请输入用户', trigger: 'blur'},
              {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
            ],
            password: [
              {required: true, message: '请输入密码', trigger: 'change'},
              {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
            ],
          },
          isShow: false
        }

      },
      methods:{
        //图片验证通过
        async success(){
          const { data : res } = await  this.$http.post('system/user/login',this.userLoginForm)
          if(res.success){
              this.$message({
                title: "登入成功",
                message: "欢迎来到新冠-上海物资管理系统",
                type: "success",
              })
          }
          // 获取响应回来的token
          let  token = res.data;
          //将token保存到  本地存储空间里面
          LocalStorage.set(LOCAL_KEY_XINGUAN_ACCESS_TOKEN,token)
          //  最后发起请求获取用户信息
          await this.getUserInfo();
        },
       async getUserInfo(){
         const { data : res } = await  this.$http.post('system/user/info')
         if(res.success){
           //将用户信息保存到班底缓存空间里面
           this.$store.commit("setUserInfo",res.data)
           this.$router.push("/home")
         }
        },
        restForm(){
          //点击重置，将form表单里面的数据清空
          this.$refs.userLoginFormRef.resetFields()
        },
        //表单验证
        handleSubmit(){
          this.$refs.userLoginFormRef.validate((valid)=>{
            if(valid){
              this.isShow = true;
            }else{
              return ;
            }
          })
        }
      }

    }
</script>

<style scoped>
  .avatar-box {
    width: 100px;
    height: 100px;
    border: 1px solid #eeeeee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: -85px auto;
    background-color: #ffffff;
  }
  #login {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .login-h1 {
    position: absolute;
    color: #ffffff;
    left: 50%;
    transform: translateX(-50%);
    top: -112px;
  }
  .login-title {
    text-align: center;
    color: #2d3a4d;
  }
  .login-form {
    position: relative;
    border-radius: 5px;
    margin: 190px auto;
    width: 400px;
    padding: 40px 35px 16px;
    background: #ffffff;
    border: 1px solid #eaeaea;
  }
</style>
